import { Col, Row } from 'antd';
import QRCode from 'qrcode.react';
import { useEffect, useRef, useState } from 'react';
import { useModel } from 'umi';
import { useReactToPrint } from 'react-to-print';
import { formatData, getGoodsNum, isShowEyeInfo, isShowFrameInfo, museText } from './Detail';
import { setPageSize, maskedIdCard } from '@/utils/utils';
import './PrintBillHTML.less';

const PrintBillHTML = ({ data, after }: { data: any, after: () => void }) => {

  const [showEyeInfo, setShowEyeInfo] = useState<boolean>(false);
  const [showFrameInfo, setShowFrameInfo] = useState<boolean>(false);

  const { initialState } = useModel('@@initialState');

  const printRef = useRef<any>(null);

  const print = useReactToPrint({
    content: () => printRef.current,
    onBeforeGetContent: () => {
      return new Promise((resolve) => setTimeout(() => resolve(true), 10));
    },
    onAfterPrint: after
  });

  useEffect(() => {
    // setPageSize('landscape');
    setShowEyeInfo(isShowEyeInfo(data));
    setShowFrameInfo(isShowFrameInfo(data));
    print();
  }, [])
  return <div ref={printRef} className='bill-print print_yes_width1' style={{ display: 'none' }}>
    <div className='header'>
      <div className="logo"><img src={require('@/assets/images/logo_print.png')} /></div>
      <div className='title'>票据单</div>
    </div>
    {/* 头部信息 */}
    <Row style={{ marginTop: 30 }}>
      <Col flex='1 0 auto' style={{ fontSize: 12, fontWeight: 'bold' }}>
        <Row>
          <Col flex='39%'>单据号：{data.order_id}</Col>
          <Col flex='34%'>归属科室：眼视光中心</Col>
          <Col flex='1'>科室电话：0736-7788032</Col>
        </Row>
        <Row>
          <Col flex='15%'>姓名：{data.patient_name ?? '-'}</Col>
          <Col flex='10%'>性别：{(data.patient_sex_name ?? '-').replace('性', '')}</Col>
          <Col flex='14%'>年龄：{((data.patient_age ?? '-') + '岁').replace('-岁', '-')}</Col>
          <Col flex='34%'>身份证/住院号：{maskedIdCard(data.identity_no)}</Col>
          <Col flex='1'>手机号：{data.mobile || '-'}</Col>
        </Row>
      </Col>
      <Col flex='82px'>
        <QRCode
          style={{ marginTop: -35, paddingBottom: 2 }}
          // value参数为生成二维码的链接
          value={data.pay_qr_code_url || ''}
          // 二维码的宽高尺寸
          size={80}
          // 二维码的颜色
          fgColor="#000"
          renderAs="svg"
        />
      </Col>
    </Row>

    {/* 商品信息 */}
    <div className='table'>
      <div className='title'>商品信息</div>
      <Row>
        <Col flex='12%'>分类</Col>
        {/* <Col flex='11%'>品牌</Col> */}
        <Col flex='21%'>商品名称</Col>
        <Col flex='12%'>商品编号</Col>
        <Col flex='16%'>规格（单位）</Col>
        <Col flex='9%'>单价</Col>
        <Col flex='6%'>数量</Col>
        <Col flex='9%'>原价</Col>
        <Col flex='6%'>折扣</Col>
        <Col flex='9%'>折扣价</Col>
      </Row>
      {
        (data.order_goods_list as Array<any> ?? []).map(curr => {
          return <Row>
            <Col flex='12%'>{curr.class_name}</Col>
            {/* <Col flex='11%'>{curr.brand_name}</Col> */}
            <Col flex='21%'>{curr.goods_name}</Col>
            <Col flex='12%'>{curr.goods_id}</Col>
            <Col flex='16%'>{curr.specs_name}</Col>
            <Col flex='9%'>{curr.goods_price}</Col>
            <Col flex='6%'>{curr.goods_num}</Col>
            <Col flex='9%'>{curr.goods_total_price}</Col>
            <Col flex='6%'>{curr.discount}</Col>
            <Col flex='9%'>{curr.discount_price}</Col>
          </Row>
        })
      }
    </div>
    {
      /* 验光信息 */
      showEyeInfo &&
      <div className='table' style={{ marginTop: 7 }}>
        <Row>
          <Col flex='11%'>眼别</Col>
          <Col flex='9.5%'>球镜</Col>
          <Col flex='9.5%'>柱镜</Col>
          <Col flex='9.5%'>轴位</Col>
          <Col flex='11%'>矫正前视力</Col>
          <Col flex='11%'>矫正后视力</Col>
          <Col flex='9.5%'>离焦量</Col>
          <Col flex='9.5%'>瞳距</Col>
          <Col flex='10%'>总瞳距</Col>
          <Col flex='9.5%'>瞳高</Col>
        </Row>
        <Row>
          <Col flex='11%'>
            <Col>右眼 (R)</Col>
            <Col>左眼 (L)</Col>
          </Col>
          <Col flex='9.5%'>
            <Col>{formatData(data.right_degrees)}</Col>
            <Col>{formatData(data.left_degrees)}</Col>
          </Col>
          <Col flex='9.5%'>
            <Col>{formatData(data.right_astig)}</Col>
            <Col>{formatData(data.left_astig)}</Col>
          </Col>
          <Col flex='9.5%'>
            <Col>{data.right_axial ?? <>&nbsp;</>}</Col>
            <Col>{data.left_axial}</Col>
          </Col>
          <Col flex='11%'>
            <Col>{data.right_rectify_bef ?? <>&nbsp;</>}</Col>
            <Col>{data.left_rectify_bef}</Col>
          </Col>
          <Col flex='11%'>
            <Col>{data.right_rectify_af ?? <>&nbsp;</>}</Col>
            <Col>{data.left_rectify_af}</Col>
          </Col>
          <Col flex='9.5%'>
            <Col>{data.right_defocus ?? <>&nbsp;</>}</Col>
            <Col>{data.left_defocus}</Col>
          </Col>
          <Col flex='9.5%'>
            <Col>{data.pup_distance_right ?? <>&nbsp;</>}</Col>
            <Col>{data.pup_distance_left}</Col>
          </Col>
          <Col flex='10%'>
            <Col className='merge'>{data.pup_distance}</Col>
          </Col>
          <Col flex='9.5%'>
            <Col>{data.pup_high_right ?? <>&nbsp;</>}</Col>
            <Col>{data.pup_high_left}</Col>
          </Col>
        </Row>
        <Row style={{ textAlign: 'left' }}>
          <Col flex='50.5%' style={{ paddingLeft: 10 }}>用途：{museText[data?.muse] || '-'}</Col>
          <Col flex='49.5%' style={{ paddingLeft: 10 }}>ADD：{data.madd}</Col>
        </Row>
      </div>
    }
    {
      /* 镜架信息 */
      showFrameInfo &&
      <div className='table' style={{ marginTop: 7 }}>
        <Row>
          <Col flex='90px' style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>镜架信息</Col>
          <Col flex='1 0 auto'>
            <Row>
              <Col flex='10%'>框宽</Col>
              <Col flex='10%'>框高</Col>
              <Col flex='10%'>中梁</Col>
              <Col flex='12%'>镜对角直径</Col>
              <Col flex='14%'>型号</Col>
              <Col flex='14%'>框型</Col>
              <Col flex='16%'>是否需要防滑套</Col>
              <Col flex='14%'>是否自备镜架</Col>
            </Row>
            <Row>
              <Col flex='10%'>{data.frame_width || '-'}</Col>
              <Col flex='10%'>{data.frame_height || '-'}</Col>
              <Col flex='10%'>{data.frame_middle || '-'}</Col>
              <Col flex='12%'>{data.frame_diagonal || '-'}</Col>
              <Col flex='14%'>{data.frame_model || '-'}</Col>
              <Col flex='14%'>{data.frame_material || '-'}</Col>
              <Col flex='16%'>{data.is_slip === 'Y' ? '需要' : '不需要'}</Col>
              <Col flex='14%'>{(data.frame_flag ?? '0') == '0' ? '非自备' : (data.frame_flag == '1' ? '自备/留' : '自备/未留')}</Col>
            </Row>
          </Col>
        </Row>
      </div>
    }
    {
      /* 验光医生信息 */
      showEyeInfo &&
      <Row style={{ padding: '8px 3px', fontSize: 12, borderBottom: '1px solid #000' }}>
        <Col style={{ width: '40%' }}>验光号：{data.sight_no || '-'}</Col>
        <Col style={{ width: '40%' }}>就诊医生：{data.doctor_name || '-'}</Col>
        <Col>验光师：{data.optician_name || '-'}</Col>
      </Row>
    }
    {/* 底部汇总信息 */}
    <div style={{ fontSize: 12 }}>
      {/* <Row style={{ padding: '5px 0 1px' }}>
        <Col style={{ width: '32%', wordBreak: 'break-all' }}>订单编号：{data.order_id}</Col>
        <Col style={{ width: '28%' }}>创建时间：{data.create_date + ' ' + data.create_time}</Col>
        <Col style={{ width: '22%' }}>订单状态：{orderStatus[data.order_status]}</Col>
        <Col flex='1'>发票：{data.is_ballot === 'Y' ? '已开具' : '未开'}</Col>
      </Row> */}
      <Row style={{ padding: '5px 0 1px' }}>
        <Col style={{ width: '32%' }}>商品原价：{data.goods_total_price} (元)</Col>
        <Col style={{ width: '28%' }}>商品数量：{getGoodsNum(data.order_goods_list, 'goods_num')} (件)</Col>
        <Col style={{ width: '22%' }}>订单金额：{data.total_price} (元)</Col>
        <Col flex='1'>订单折扣：{data.discount_ratio}</Col>
      </Row>
      <Row style={{ padding: '1px 0' }}>
        <Col style={{ width: '32%' }}>应收款：{data.sett_price} (元)</Col>
        <Col style={{ width: '28%' }}>欠款：{parseFloat(data.owing_price ?? 0).toFixed(2)} (元)</Col>
        <Col style={{ width: '22%' }}>邮寄费：{parseFloat(data.franking ?? 0).toFixed(2)} (元)</Col>
        <Col flex='1'>结算价格：{data.sett_price} (元)</Col>
      </Row>
      <Row style={{ padding: '1px 0' }}>
        <Col style={{ width: '32%' }}>收件人：{data.frank_name || '-'}</Col>
        <Col style={{ width: '28%' }}>收件人电话：{data.frank_phone || '-'}</Col>
        <Col flex='1'>收件人地址：{data.frank_address || '-'}</Col>
      </Row>
      <Row style={{ padding: '1px 0', fontWeight: 'bold' }}>
        <Col style={{ width: '20%' }}>制单人：{data.create_user_name || '-'}</Col>
        <Col style={{ width: '20%' }}>收款人：{initialState?.currentUser?.oper_name || '-'}</Col>
        <Col style={{ width: '20%' }}>制镜：</Col>
        <Col style={{ width: '20%' }}>检验：</Col>
        <Col style={{ width: '20%' }}>发镜：</Col>
      </Row>
    </div>
  </div>;
};

export default PrintBillHTML;

const orderStatus = {
  'C': '已开单',
  'W': '待支付',
  'P': '已支付',
  'F': '已完成',
  'E': '已作废',
  'A': '退款待审批',
  'R': '已退款',
  'U': '退款处理中'
};
